X

Html/Css

How to Embed a Codesandbox on your Site

December 17, 2022

/*

How to Embed a Codesandbox on your site


*/

You can easily embed a sandbox by navigating to the sandbox you want, clicking the share button in the top nav menu & click the button copy embed code. Paste that code in your site & you have a sandbox from codesandbox.io. You can adjust the features of the sandbox by adding parameters to url in the iframe. They have multiple options that can be found here. There are some pros and cons to using this.

/*

Pros


*/

You can get the code & a preview of the project & put in anywhere on your site.

You can change whether you see the code first, the project preview first or a split view of each

You can add features like changing the editor, highlighting lines of code, switching the theme & many more

It's simple to add it to any webpage

/*

Cons


*/

The load times for each sandbox take around 6 seconds

You can't separate the code from the project preview, they always come together

You can't get just a snippet of the code unless you make another sandbox

Huge security risk with using iframes


It has it's pros & cons but it's still a really cool feature to have especially when you want to show the code for a really long project or show the preview for a really cool project.

About the Author

Christopher Howard

Chris is a Javascript developer with a minor in UI design. He values programming in vanilla code. Fill out the form below to contact him.